<template>
  <div class="table">
    <div class="container">
      <div class="handler-box">
        <el-input v-model="selectKey" size="mini"placeholder="请输入歌曲名" class="handle-input"></el-input>
        <el-button type="primary" size="mini" @click="centerDiaLogVisible=true">添加歌曲</el-button>
        <el-button type="danger" size="mini" @click="handlerDeleteAll">全部删除</el-button>
      </div>
    </div>
    <!--    歌曲列表-->
    <el-table size="mini" border style="width: 100%;height:600px" max-height="500" @selection-change="handlerSelectionChange" :data="data">
      <el-table-column type="selection" width="40"></el-table-column>
      <el-table-column label="歌曲图片" width="110"  align="center">
        <template slot-scope="scope">
          <div class="singer-img">
            <img :src="scope.row.pic" style="width: 100%"/>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="歌手-歌曲" width="100" align="center" prop="name"></el-table-column>
      <el-table-column label="专辑" width="70" align="center" prop="introduction"></el-table-column>
      <el-table-column label="歌词" width="881" align="center" prop="lyric"></el-table-column>
      <el-table-column label="操作" width="150" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="handlerDelete(scope.row.id)" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination background layout="total,prev,pager,next"
                     :current-page="currentPage"
                     :page-size="pageSize"
                     :total="tableData.length"
                     @current-change="handlerChange"
      >
      </el-pagination>
    </div>
    <el-dialog
        title="添加歌曲"
        :visible="centerDiaLogVisible"
        width="400px"
        center
        :show-close="false"
    >
      <el-form :model="registerForm" ref="registerForm" label-width="80px">
        <el-form-item prop="listSongName" label="歌手-歌曲名" size="mini">
          <el-input v-model="registerForm.listSongName" placeholder="歌手名"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button size="mini" @click="centerDiaLogVisible=false">取消</el-button>
        <el-button size="mini" @click="addSinger">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog
        title="删除歌曲"
        :visible="deleteVisible"
        width="300px"
        center
        :show-close="false"
    >
      <div align="center">是否删除该歌曲!!</div>
      <span slot="footer">
        <el-button size="mini" @click="deleteVisible=false">取消</el-button>
        <el-button size="mini" @click="deleteSinger">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog
        title="删除全部歌曲"
        :visible="deleteAllVisible"
        width="300px"
        center
        :show-close="false"
    >
      <div align="center">是否删除全部歌曲!!</div>
      <span slot="footer">
        <el-button size="mini" @click="deleteAllVisible=false">取消</el-button>
        <el-button size="mini" @click="deleteAll">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "ListSong",
  data(){
    return{
      id:'',
      centerDiaLogVisible:false,
      deleteVisible:false,
      deleteAllVisible:false,
      SongId:{},
      songListId: '',
      listSong:[],
      listSongKey:{},
      //添加框
      registerForm:{
        listSongName:''
      },
      //歌曲列表
      tableData:[],
      tempData:[],
      selectKey:'',
      pageSize:5,
      currentPage:1,
      idx:'',
      multipleSelection:[] //哪些已经打勾了
    }
  },
  methods:{
    //添加歌曲
    async addSinger(){
      await this.getId()
      let songId=this.SongId.id
      let songListId=this.songListId
      let params=new URLSearchParams()
      params.append('songId',songId)
      params.append('songListId',songListId)
      let result=await this.$API.reqAddSongListSong(params)
      if (result.code=10000){
        this.tempData=[]
        this.tableData=[]
        this.centerDiaLogVisible=false
       await this.getData()
        this.$notify.success('添加歌曲成功')
      }else{
        this.$notify.error('添加歌曲失败')
      }
    },
    //弹出删除窗口
    handlerDelete(id){
      this.idx=id
      this.deleteVisible=true
    },
    handlerDeleteAll(id){
      this.idx=id
      this.deleteAllVisible=true
    },
    async deleteSinger(){
      for (const item of this.listSong) {
        if (item.songId==this.idx){
          let result=await this.$API.reqDeleteSongListSong(item.id)
          if (result.code==10000){
            this.tempData=[]
            this.tableData=[]
            await this.getData()
            this.deleteVisible=false
            this.$notify.success('删除歌曲成功')
          }else {
           this.$notify.error('删除歌曲失败')
          }
        }
      }
    },
    //查询全部歌曲
    async getData(){
      await this.getSongId()
      for (const item of this.listSong) {
        let result=await this.$API.reqShowSongBySongId(item.songId)
        if (result.code==10000){
          this.tempData.push(result.data)
          this.tableData.push(result.data)
        }else{
          await Promise.reject(new Error('fail'))
        }
      }
    },
    handlerSelectionChange(val){
      this.multipleSelection=val
    },
    deleteAll(){
      for (let item of this.multipleSelection){
        this.handlerDeleteAll(item.id)
        this.deleteSinger()
      }
      this.deleteAllVisible=false
      this.multipleSelection=[]
    },
    async getId(){
      let result=await this.$API.reqShowSongId(this.registerForm.listSongName)
      if (result.code==10000){
        this.SongId= result.data
      }else {
        this.$notify.error('未有该歌曲！请在歌曲界面添加该歌曲')
      }
    },
    async getSongId(){
     let result=await this.$API.reqShowAllSongListSong(this.songListId)
      if (result.code==10000){
        this.listSong=result.data
      }else{
        this.$notify.error('该歌单暂无歌曲')
      }
    },
    //分页跳转
    handlerChange(val){
      this.currentPage=val
    }
  },
  mounted() {
    this.songListId=this.$route.query.songListId
    this.getData()
  },
  watch:{
    //监听输入框里面的内容，跟随变化
    selectKey(){
      if (this.selectKey==''){
        this.tableData=this.tempData
      }else {
        this.tableData=[]
        for (let item of this.tempData){
          if (item.name.includes(this.selectKey)){
            this.tableData.push(item)
          }
        }
      }
    }
  },
  computed:{
    data(){
      return this.tableData.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize)
    }
  }
}
</script>

<style scoped>
.handler-box{
  margin-bottom: 20px;
}
.singer-img{
  width: 100%;
  height: 60px;
  border-radius: 5px;
  margin-bottom: 5px;
  overflow: hidden;
}
.handle-input{
  width: 300px;
  display: inline-block;
}
.pagination{
  display: flex;
  justify-content: center;
}
</style>
